<template>
    <div style="height: 100%;width: 100%">
        <h4 class="page-name">轨迹预测模型系统应用</h4>
        <el-dialog title="轨迹预测" :visible.sync="dialogFormVisible">
            <el-form width="440" :inline="true" :model="paramForm" class="demo-form-inline">
                <el-form-item label="">
                    <el-date-picker
                            v-model="timeArr"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="paramForm.zhanlue_event" placeholder="搜索战略事件"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="paramForm.zhanchang_event" placeholder="搜索战场事件"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="predict">确 定</el-button>
            </div>
        </el-dialog>
        <div id="mapDetail" v-show="mapDetailVisible">
            <p class="p-title">{{mapDetail.shipNameChi}}</p>
            <p>舷号: {{mapDetail.hullNum}}</p>
            <p>速度: {{mapDetail.speed}}</p>
            <p>定位时间：{{mapDetail.posDatetime}}</p>
            <p>船舰用途：{{mapDetail.shipUsage}}</p>
        </div>
        <!--<div class="biaoshi">
            <img :src="biaoshi">
        </div>-->
        <div v-show="prdictBtnVisible" id="predictBtn">
            <el-button class="alert-btn" @click="predict">开始预测</el-button>
<!--            <el-button class="alert-btn" @click="getSimilar">显示相似轨迹</el-button>-->

        </div>

    </div>

</template>

<script>
    import blueShip from "./../assets/imgs/navigation-log/blueShip.png";
    import ship3Img from "./../assets/imgs/navigation-log/ship3.png";
    import planeImg from "./../assets/imgs/navigation-log/feiji.png";
    import plane2Img from "./../assets/imgs/navigation-log/feiji2.png";
    import plane3Img from "./../assets/imgs/navigation-log/feiji3.png";
    import predictship from "./../assets/imgs/navigation-log/predictship.png";
    import yellowCircle from "./../assets/imgs/navigation-log/yellow-circle.png";
    import blueCircle from "./../assets/imgs/navigation-log/blue-circle.png";


    import * as request from "../http/request.js"
    import * as Cesium from 'cesium/Cesium'
    import 'cesium/Widgets/widgets.css'

    export default {
        name: 'dataAnalysis',
        data() {
            return {
                timeArr: null,
                paramForm: {
                    "startTime":"2023-02-01",
                    "endTime":"2024-03-01",
                    "longitudeStart":"118",
                    "longitudeEnd":"119",
                    "latitudeStart":"23",
                    "latitudeEnd":"25",
                    "flightLine":""
                },
                viewer: null,
                shipData: [],
                flightData: [],
                curFlightId: '',
                dialogFormVisible: false,
                mapDetailVisible: false,
                mapDetail: {
                    shipNameChi: '',
                    hullNum: '',
                    posDatetime: "2023-06-01T00:11:33",
                    shipUsage: "保障",
                    speed: ''
                },
                prdictBtnVisible: false,
                similarParam: {
                    flightLine:"",
                    flightLineComparision:[]
                }
            }
        },
        mounted() {
            // viewer.timeline.container.style.visibility = 'hidden' // 不显示动画控件
            viewer.entities.removeAll()
            this.commonjs.changeto2D()
            this.getData()

        },
        methods: {
            getData() {
                let _self = this
                request.getmodelFlight().then(function (res) {
                    _self.shipData = res.data.data
                    // _self.flightData = data.aircraft_track_list
                    //
                    // _self.handleFlightData()
                    _self.handleShipData()
                })
            },
            /* handleFlightData(data) {
                 console.log(data)
                 data = this.flightData
                 for (let i = 0; i < data.length; i++) {
                     let flight = data[i].flight
                     let lineData = [];
                     for (let i = 0; i < flight.length; i++) {
                         lineData.push(flight[i].coordinate[0]);
                         lineData.push(flight[i].coordinate[1]);
                     }
                     for (let i = 1; i < flight.length; i++) {
                         viewer.entities.add({
                             name: "航迹坐标点",
                             position: Cesium.Cartesian3.fromDegrees(flight[i].coordinate[0], flight[i].coordinate[1]),
                             billboard: {
                                 //图标
                                 image: blueCircle,
                                 width: 29,
                                 height: 15,
                                 rotation: flight[i].track,

                             },
                             attribute: {
                                 posDatetime: flight[i].posDatetime,//定位时间
                                 shipUsage: flight[i].aircraft_usage,//舰船用途
                             }
                         })
                     }
                     viewer.entities.add({
                         name: "航迹起点",
                         position: Cesium.Cartesian3.fromDegrees(flight[0].coordinate[0], flight[0].coordinate[1]),
                         billboard: {
                             //图标
                             image: planeImg,
                             width: 29,
                             height: 15,
                             rotation: flight[i].track,
                         },
                     });
                     viewer.entities.add({
                         name: "航迹线",
                         polyline: {
                             positions: Cesium.Cartesian3.fromDegreesArray(lineData),
                             width: 1,
                             arcType: Cesium.ArcType.RHUMB,
                             material: new Cesium.PolylineDashMaterialProperty({
                                 color: Cesium.Color.fromCssColorString('#fff'),
                             }),
                         }
                     })
                 }
                 console.log(data)
                 let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                 let _self = this;
                 handler.setInputAction(function (e) {
                     _self.dialogFormVisible = true
                 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
             },*/
            handleShipData() {
                debugger
                let data = this.shipData
                for (let i = 0; i < data.length; i++) {
                    let flight = data[i].flight
                    let lineData = [];
                    for (let i = 0; i < flight.length; i++) {
                        lineData.push(flight[i].coordinate[0]);
                        lineData.push(flight[i].coordinate[1]);
                    }
                    viewer.entities.add({
                        name: "航迹起点",
                        position: Cesium.Cartesian3.fromDegrees(flight[0].coordinate[0], flight[0].coordinate[1]),
                        billboard: {
                            //图标
                            image: blueShip,
                            width: 29,
                            height: 29,
                            rotation: Cesium.Math.toRadians(flight[0].track),
                        },
                    });
                    for (let k = 1; k < flight.length - 1; k++) {
                        viewer.entities.add({
                            name: "航迹坐标点",
                            position: Cesium.Cartesian3.fromDegrees(flight[k].coordinate[0], flight[k].coordinate[1]),
                            billboard: {
                                //图标
                                image: blueCircle,
                                width: 10,
                                height: 10,
                                rotation: Cesium.Math.toRadians(flight[k].track),

                            },
                            attribute: {
                                shipNameChi: data[i].shipNameChi,
                                hullNum: data[i].hullNum,
                                speed: flight[k].speed,
                                posDatetime: flight[k].posDatetime,//定位时间
                                shipUsage: flight[k].shipUsage,//舰船用途
                                id: data[i].flightLine
                            }
                        })
                        viewer.entities.add({
                            name: "航迹线",
                            polyline: {
                                positions: Cesium.Cartesian3.fromDegreesArray([flight[k - 1].coordinate[0], flight[k - 1].coordinate[1], flight[k].coordinate[0], flight[k].coordinate[1]]),
                                arcType: Cesium.ArcType.RHUMB,
                                width: 8,
                                material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.WHITE)

                            },
                            attribute: {
                                id: data[i].flightLine,
                            }
                        })
                    }
                    viewer.entities.add({
                        name: "航迹线",
                        polyline: {
                            positions: Cesium.Cartesian3.fromDegreesArray([flight[flight.length - 2].coordinate[0], flight[flight.length - 2].coordinate[1], flight[flight.length - 1].coordinate[0], flight[flight.length - 1].coordinate[1]]),
                            arcType: Cesium.ArcType.RHUMB,
                            width: 8,
                            material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.WHITE)
                        },
                        attribute: {
                            id: data[i].flightLine,
                        }
                    })
                    viewer.entities.add({
                        name: "航迹终点",
                        position: Cesium.Cartesian3.fromDegrees(flight[flight.length - 1].coordinate[0], flight[flight.length - 1].coordinate[1]),
                        billboard: {
                            //图标
                            image: blueShip,
                            width: 29,
                            height: 29,
                            rotation: Cesium.Math.toRadians(flight[flight.length - 1].track),
                        },
                        attribute: {
                            uuid: data[i].mmsi,
                            flightLine: data[i].flightLine,
                            categories: 'ship',
                            type: '',
                        }
                    });
                    /*  viewer.entities.add({
                          name: "航迹线",
                          polyline: {
                              positions: Cesium.Cartesian3.fromDegreesArray(lineData),
                              arcType: Cesium.ArcType.RHUMB,
                              width : 1,
                              material : new Cesium.PolylineDashMaterialProperty(Cesium.Color.WHITE)

                          },
                          attribute: {
                              id: data[i].flightLine,
                          }
                      })*/
                }
                console.log(data)
                let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                let _self = this;
                handler.setInputAction(function (e) {

                    let currentTarget = viewer.scene.pick(e.position);
                    if (viewer.scene.pickPositionSupported && Cesium.defined(currentTarget)) {
                        if (currentTarget.id.name == '航迹坐标点' || currentTarget.id.name == '航迹线') {
                            _self.mapDetailVisible = true;
                            _self.mapDetail = {
                                shipNameChi: currentTarget.id.attribute.shipNameChi,
                                hullNum: currentTarget.id.attribute.hullNum,
                                posDatetime: currentTarget.id.attribute.posDatetime,
                                shipUsage: currentTarget.id.attribute.shipUsage,
                                speed: currentTarget.id.attribute.speed
                            }

                            console.log(_self.mapDetail)
                            let element = document.getElementById('mapDetail');
                            //笛卡尔坐标转为屏幕坐标
                            // let pos = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, e.position);
                            element.style.top = (e.position.y + 10) + 'px';
                            element.style.left = (e.position.x + 10) + 'px';

                        } else if (currentTarget.id.name == '航迹终点') {
                            _self.prdictBtnVisible = true
                            let element1 = document.getElementById('predictBtn');
                            element1.style.top = (e.position.y + 10) + 'px';
                            element1.style.left = (e.position.x + 10) + 'px';
                            _self.paramForm = currentTarget.id.attribute
                            _self.similarParam.flightLine = currentTarget.id.attribute.flightLine
                        } else {
                            _self.mapDetail = {};
                            _self.mapDetailVisible = false;
                        }
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            },
            predict() {
                this.prdictBtnVisible = false
                let _self = this
                request.modelPredict(this.paramForm).then(function (res) {
                    if (res.data.data) {
                        _self.handlePredict(res.data.data)
                    } else {
                        _self.$message.error(res.data.errMsg);
                    }
                })
            },
            handlePredict(data) {
                let flight = data.flight
                let lineData = [];
                for (let i = 0; i < flight.length; i++) {
                    lineData.push(flight[i].coordinate[0]);
                    lineData.push(flight[i].coordinate[1]);
                }
                for (let i = 0; i < flight.length; i++) {
                    viewer.entities.add({
                        name: "航迹坐标点",
                        position: Cesium.Cartesian3.fromDegrees(flight[i].coordinate[0], flight[i].coordinate[1]),
                        ellipse: {
                            semiMinorAxis: 3,
                            semiMajorAxis: 3,
                            show: true,
                            material: Cesium.Color.fromCssColorString('#fffe4e')  //资源地址
                        },
                    })
                }
                viewer.entities.add({
                    name: "预测终点",
                    position: Cesium.Cartesian3.fromDegrees(flight[flight.length - 1].coordinate[0], flight[flight.length - 1].coordinate[1]),
                    billboard: {
                        //图标
                        image: predictship,
                        width: 29,
                        height: 29,
                    },
                });
                viewer.entities.add({
                    name: "航迹线",
                    polyline: {
                        positions: Cesium.Cartesian3.fromDegreesArray(lineData),
                        width: 8,
                        arcType: Cesium.ArcType.RHUMB,
                        material: new Cesium.PolylineDashMaterialProperty({
                            color: Cesium.Color.fromCssColorString('#fffe4e'),
                        }),
                        clampToGround: true
                    }
                })
            },
            getSimilar() {
                this.prdictBtnVisible = false
                let _self = this
                request.getSimilarTrace(this.similarParam).then(function (res) {
                    if (res.data.data) {
                        _self.handlePredict(res.data.data)
                    } else {
                        _self.$message.error(res.data.errMsg);
                    }
                })
            },
        },
    }
</script>

<style lang="scss" scoped>
    $item-bg-color: rgba(0, 78, 126, .8);
    $item-bg-color2: #5B82BC;
    $text-color: #ffffff;
    .page-name {
        position: absolute;
        top: 30px;
        left: 30px;
        padding: 5px 30px 5px 10px;
        border-radius: 3px;
        color: #fff;
        background: url("../assets/imgs/navigation-log/shijianzhou_bg.png");
    }

    /*标识*/
    .biaoshi {
        position: absolute;
        top: 50%;
        left: 20px;

        img {
            width: 100px;
        }
    }

    /*    参数表单*/
    .params-form {
        position: absolute;
        right: 20px;

        .el-form-item__label {
            color: #fff;
        }

        .el-form-item__content {
            width: 130px;
        }

        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 135px;
        }
    }

    ::v-deep .el-form--inline .el-form-item__content {
        width: 350px;
    }

    #predictBtn {
        position: absolute;
        background: #017ec8;
        color: #fff;
        border: none;
        padding: 10px;
        border-radius: 4px;

        .alert-btn {
            padding: 5px;
            background: none;
            color: #fff;
            border: none;
        }
    }

    /*弹框*/
    ::v-deep .el-dialog {
        background: url("../assets/imgs/jicheng_tc_bg.png") no-repeat;
        background-size: 100% 100%;
        padding: 10px;
        width: 400px;

        .el-dialog__header {
            padding: 0;
        }

        .el-dialog__title {
            color: #fff;
            float: left;
            margin-left: 20px;
        }

        .el-button {
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border: none;
        }

        .el-button:focus,
        .el-button:hover {
            background: #00c1d6;
        }

        .el-dialog__body {
            text-align: center;
            margin-top: 60px;
            padding: 0;
            padding-left: 15px;
        }

        .el-dialog__title {
            color: #fff;
        }

        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: center;
        }

    }


    /* 定义滚动条样式 */
    ::-webkit-scrollbar {
        width: 5px;
        height: 6px;
        background-color: #fff;
    }

    // /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, .8);
        background: $item-bg-color;
    }

    // /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 0px rgba(240, 240, 240, .8);
        background-color: #33B2FF;
        border-radius: 4px;
    }
</style>

